<template>
  <div class="common-layout" >
    <el-container>


<!--第一部分-->
      <el-container style="height: 150px;">
        <!--<el-icon><CirclePlus /></el-icon>-->

        <!-- 单个100px大小的圆形头像 -->
        <el-aside width="200px" class="aside-center">
                <div class="block" style="margin-left: -20px;">
                  <el-avatar :size="120" :src="selfAvatarUrl" />
                </div>
        </el-aside>

        <!--姓名，班级，学号。右上角两个按钮部分-->
        <el-main>
          
          <div class = "tableTop"> 
              <span class="name">{{selfName}}</span>
              <span class="lightgray-box">{{ selfDepartment }}</span>
              <span class="gray-box">个人ID:{{ webStore.web.uid }}</span><!--学号改id-->
              <div style="display: flex;margin-left: 1520px;margin-top: 0px;">
                <CreateClub />
              <MyMessage />
              </div>
            </div>

        </el-main>

      </el-container>


<!--第二部分-->
      <el-main>
        <el-row class="el-row">
          <el-col :span="3">
            <router-link to="/Collection">
              <el-button type="primary" round>收藏的社团</el-button>
            </router-link>
          </el-col>
          <el-col :span="3">
            <router-link to="/Participation">
            <el-button type="primary" round>加入的社团</el-button>
            </router-link>
          </el-col>
          <el-col :span="3">
            <router-link to="/Administration">
            <el-button type="primary" round>管理的社团</el-button>
            </router-link>
          </el-col>
        </el-row>
      </el-main>


<!--第三部分-->
      <el-footer>
        <el-table :data="filterTableData" style="width: 85%">
          <!--<el-table-column label="Date" prop="date" />-->
          <!--<el-table-column label="Name" prop="name" />-->
          <el-table-column label="社团名称" prop="name" />
          <el-table-column label="社团分类" prop="tags" />
          <el-table-column label="图片" prop="avatarUrl">
            <template #default="scope">
              <img :src="scope.row.avatarUrl" style="max-width: 100px; max-height: 100px;" />
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="registerTime" />
          <el-table-column label="社长姓名" prop="studentName" />
          <el-table-column align="right">
            <template #header>
              <el-input v-model="search" size="small" placeholder="搜索社团名称" />
            </template>
            <template #default="scope">
              <!-- <NotLogged :club = scope.row :setDialogVisible = setDialogVisible :wid=50 :hei=25 :where = 1 /> -->
              <el-button size="small" @click="lookDetail(scope.row)">查看</el-button>
              <el-button size="small" type="danger" @click="deleteClub(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-footer>
        <!-- 在这里怎么拿到这个数据呢 -->
    </el-container>
  </div>
  <!-- <NotLogged :club = tempData :wid=50 :hei=25 :where = 1 /> -->

<div class="detail" v-if="show">
  <NotLogged :club="checkData"  :wid="300" :hei="300" :where = 0 />
  <p class="detail-text">点击图片查看社团详情</p>
  <el-button type="primary" round @click = "close" class="detail-closebtn">关闭</el-button>
</div>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
import { useWebStore } from '@/stores/web';
import axios from 'axios';
import NotLogged from '../Visitor/NotLogged.vue';
import MyMessage from './MyMessage.vue'
import CreateClub from './CreateClub.vue';
import { ElNotification,ElMessageBox } from 'element-plus'

const webStore = useWebStore()

const state = reactive({
  circleUrl:
      'https://clubmate.oss-cn-beijing.aliyuncs.com/074071e2-f794-447d-bc46-e27887404728.jpg', 

})

const { circleUrl} = toRefs(state)

import { computed, ref } from 'vue'
const search = ref('')
const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)

const tableData = ref([])

let selfName=ref('')
let selfDepartment=ref('')
let selfAvatarUrl=ref('')

async function getSelfInfo() {
  try{
    const responseSelf=await axios.get('http://localhost:8080/user/getInfo/'+webStore.web.uid) 
    console.log('获取用户返回值',responseSelf.data)
    selfName.value=responseSelf.data.data.name
    selfAvatarUrl.value=responseSelf.data.data.avatarUrl
    selfDepartment.value=responseSelf.data.data.department
    console.log(selfName.value)
  }catch (error) {
    console.error('获取用户数据失败', error)
  }
}
// onMounted(getSelfInfo)


async function getCollectClubData() {
  try {
    const responseSelf=await axios.get('http://localhost:8080/user/getInfo/'+webStore.web.uid) 
    console.log('获取用户返回值',responseSelf.data)
    selfName.value=responseSelf.data.data.name
    selfAvatarUrl.value=responseSelf.data.data.avatarUrl
    selfDepartment.value=responseSelf.data.data.department
    console.log(selfName.value)

    
    const response = await axios.get('http://localhost:8080/collection/getAll',
    {
          params: {
            uid:webStore.web.uid
          },
        }
    );

      // 遍历每个记录，获取社团详细信息并组装数据
      for (let record of response.data.data.records) {
      const clubId = record.clubId; // 获取社团ID

      // 获取社团详细信息
      const clubDetailResponse = await axios.get(
          `http://localhost:8080/club/get/${clubId}`
      );

      // 获取用户详细信息
      const studentDetailResponse = await axios.get(
          `http://localhost:8080/user/getInfo/${clubDetailResponse.data.data.createUserId}` 
      );

      // 提取需要的属性并按顺序组装成新的对象
      let rowData = {
        name: clubDetailResponse.data.data.name,
        tags: clubDetailResponse.data.data.tags,
        avatarUrl: clubDetailResponse.data.data.avatarUrl,
        registerTime: clubDetailResponse.data.data.registerTime,
        studentName: studentDetailResponse.data.data.name,
        id:clubDetailResponse.data.data.id,
        createUserId:studentDetailResponse.data.data.id
      };

      // 将组装好的数据对象推入tableData数组
      tableData.value.push(rowData);
    }
  }catch (error) {
    console.error('获取收藏社团数据失败', error)
  }
}

const checkData = ref({})
const show = ref(false)

//lookDetail 和 deleteClub 的方法还没有写
async function lookDetail(row) {
  // 获取社团详细信息
  console.log("获取了"+JSON.stringify(row))
  const checkDataResponse = await axios.get(
    `http://localhost:8080/club/get/${row.id}`   
  );
  checkData.value = checkDataResponse.data.data; // 确保这里正确更新了 checkData
  console.log('lookDetail' + JSON.stringify(checkData.value))
  show.value = true;
}

async function deleteClub(row) {
  // 弹出确认窗口
  ElMessageBox.confirm('确定要取消收藏该社团吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    // 用户点击确定后的逻辑
    const cObject = {
      userId: webStore.web.uid,
      clubId: row.id
    };
    try {
      const response = await axios.post('http://localhost:8080/collection/delete', cObject);
      ElNotification({
        title: 'Success',
        message: '已取消收藏该社团',
        type: 'success',
      });
      //页面更新
      window.location.reload();
    } catch (error) {
      console.error('删除失败', error);
      ElNotification({
        title: 'Error',
        message: '删除失败',
        type: 'error',
      });
    }
  }).catch(() => {
    // 用户点击取消的逻辑
    ElNotification({
      title: 'Cancelled',
      message: '已取消删除操作',
      type: 'info',
    });
  });
}


function close(){
  show.value = false;
}

// 页面加载时发送请求
getCollectClubData()

</script>




<style scoped>

.lightgray-box {
  margin-left: 80px;
  margin-top: 32px;
  font-size: 25px;
  font-weight: 700;
  /* background-color: lightgray; */
  height: 40px;
  color:#575854 ;
}

.gray-box {
  /* background-color: gray; */
  margin-left: 80px;
  margin-top: 32px;
  height: 40px;
  font-size: 25px;
  font-weight: 700;
  color:#575854 ;
}

.el-row1 {
  margin-bottom: 35px;
  display: flex;
  flex-wrap: wrap;
  position: relative; /* 使得内部元素可以基于此定位 */
  line-height: 1.2; /* 调整行高 */
}

.el-row2 {
  display: flex;
  flex-wrap: wrap
}

.aside-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}


.name {
  margin-left: 20px;
  font-size: 3.3em; /* 放大字体 */
  font-weight: 700;
  color: rgba(0,0,0,0.4);
}

.button-container {
  position: absolute;
  top: 0;
  right: 0;
}

.active-button {
  background-color: #4caf50; /* 示例：修改按钮背景色 */
  color: #ffffff; /* 示例：修改按钮文字颜色 */
  /* 可以根据需要自定义其他样式 */
}

.dataButton{
  list-style: none;
  float: right;
  margin-top: -440px;
  margin-right: 150px;
}

.dataButton li{
  margin-bottom: 75px;
}

.toSearch{
  left:1680px;
  top:-520px;
  width: 250px;

}

.detail{
  position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-200px;
        margin-top:-200px;
        width: 400px;
        height: 400px;
        z-index: 100;
  display: flex;
  flex-direction: column;
}

.detail-text{
  margin-left: 70px;
}

.detail-closebtn{
  margin-left: 100px;
  width: 100px;
}

</style>